<template>
  <div class="talent">
    <img class="title" src="@/assets/btianfuceshi2.png" alt="">
    <img class="cons" src="@/assets/btianfuceshi3.png" alt="">
    <div class="check">
      <img v-if="!is_agreement" @click="is_agreement = !is_agreement" src="@/assets/tianfuceshi02.png" alt="">
      <img v-else @click="is_agreement = !is_agreement" src="@/assets/tianfuceshi06.png" alt="">
      <span>我已阅读 <em @click="show = !show">《天赋测试须知》</em></span>
    </div>
    <span class="btn" v-if="!is_agreement"><img src="@/assets/tianfuceshi03.png" alt=""></span>
    <span class="btn" @click="router({path: '/examStart', query: {article_type: article_type}})" v-else><img src="@/assets/tianfuceshi07.png" alt=""></span>
    <div v-transfer-dom>
      <popup v-model="show" @click="show = false">
        <div class="popup0">
          <img src="@/assets/tianfuceshi04.png" alt="">
          <span class="confirm-btn" @click="show = !show, is_agreement = true">我已阅读须知并准备检测</span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>

  import { TransferDom, Popup } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Popup
    },
    data () {
      return {
        show: false,
        is_agreement: true,
        article_type: '',
      }
    },
    created () {
      this.article_type = this.$route.query.article_type
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.confirm-btn
  width 84%
  position absolute
  left 8%
  height 5rem
  line-height 5rem
  text-align center
  color #fff
  font-size 1.7rem
  font-weight 500
  background-color #172F6D
  border-radius 100px
  z-index 99
  bottom 1.6rem
.talent
  width 100%
  height 100vh
  background-image url('../../assets/tianfuceshi01.png')
  background-size 100%
  background-repeat no-repeat
  background-color #010919
  .title
    width calc(100% - 3rem)
    position absolute
    left 1.5rem
    top 6rem
  .cons
    width calc(100% - 5.6rem)
    position absolute
    left 2.8rem
    top 12.2rem
  .check
    text-align center
    position absolute
    bottom 13rem
    width 100%
    img
      width 1.6rem
      height 1.6rem
      display inline-block
      vertical-align middle
      margin-right .5rem
    span
      font-size 1.3rem
      color #999
      display inline-block
      vertical-align middle
      em
        color #fff
  .btn
    width 86%
    left 7%
    position absolute
    bottom 3.6rem
</style>
